<template>
  <div>
    <div @click="fenxiang" class="sharebtn">
      <h4>分享</h4>
    </div>
    <van-popup class="popprice" v-model="showBJ">
      <div class="logo">
        <h4>我的Logo</h4>
        <img :src="icon?icon:logoUrl" alt>
        <van-button type="primary" @click="fileopen" size="small" class="pub">更换</van-button>
      </div>
      <van-cell-group>
        <van-field
          v-model="fx.title"
          label="标题"
          type="textarea"
          placeholder="请输入自定义标题"
          rows="2"
          autosize
        />
        <van-field
          v-model="fx.content"
          label="内容"
          type="textarea"
          placeholder="请输入自定义内容"
          rows="2"
          autosize
        />
        <div v-show="show">
          <span>只显示自己公司的资源报价单：</span>
          <van-checkbox class="inline" v-model="fx.showOwn"></van-checkbox>
        </div>
      </van-cell-group>
      <div class="btns">
        <van-button size="small" @click="showBJ=false" round type="warning">取消</van-button>
        <van-button size="small" @click="share" round type="primary">确定分享</van-button>
      </div>
    </van-popup>
    <input
      type="file"
      name="file"
      id="file"
      @change="fileupdate"
      ref="inputer"
      accept="image/*"
      v-show="false"
    >
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import api from "@/api/api";
export default {
  props: {
    batchNo: String,
    show: Boolean,
    catLogIndex: Number,
    icon: String
  },
  data() {
    return {
      showBJ: false,
      fx: {
        title: "",
        content: "",
        showOwn: true
      },
      logoUrl: "",
      timer: null
    };
  },
  created() {
    if (this.$store.state.userInfo.logo) {
      this.logoUrl =
        "https://www.icottontrade.com/cot/Upload/mylogo/" +
        this.$store.state.userInfo.logo;
    } else {
      this.logoUrl = "https://www.icottontrade.com/cot/Upload/logo.jpg";
    }

    var that = this;
    var num= 10;
    this.timer = setInterval(() => {
      if (num <= 0) {
        clearInterval(this.timer);
        console.log("error");
      }
      if (
        that.$store.state.userInfo &&
        that.$store.state.userInfo.NickName &&
        iswx
      ) {
        that.fx.title = this.$store.state.userInfo.NickName + "为您推荐";
        that.fx.content = "聚棉网为您推荐以下资源";
        //document.title = "批次图片查看";
        clearInterval(this.timer);
        console.log("success");
      } else {
        num--;
      }
    }, 500);
  },
  methods: {
    fenxiang() {
      if (!this.$store.state.userInfo.ID) {
        Toast("请先登录");
        return false;
      }
      this.showBJ = true;
    },
    share() {
      var url = "";
      if (this.$route.name == "定制需求") {
        url = "https://www.icottontrade.com/cot/redirect/supply?UserID=0";
      } else if (this.$route.name == "首页") {
        url =
          "https://www.icottontrade.com/cot/redirect?catLogIndex=" +
          this.catLogIndex +
          "&keyWords=" +
          encodeURI(this.batchNo);
        if (this.fx.showOwn) {
          url += "&showEntID=" + this.$store.state.userInfo.EntID;
        }
      } else if (this.$route.name == "供需详情") {
        url =
          "https://www.icottontrade.com/cot/redirect/baojia?id=" + this.batchNo;
      } else if (this.$route.name == "我的列表") {
        url =
          "https://www.icottontrade.com/cot/redirect/supply?UserID=" +
          this.$store.state.userInfo.ID;
      } else {
        url =
          "https://www.icottontrade.com/cot/redirect/go?url=" +
          encodeURI(window.location.href);
      }
      var that = this;
      wx.onMenuShareAppMessage({
        title: that.fx.title, // 分享标题
        desc: that.fx.content,
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.icon ? this.icon : that.logoUrl, // 自定义图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          // 用户确认分享后执行的回调函数
          Toast({
            message: "分享成功",
            duration: 1500
          });
        },
        cancel: function() {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareTimeline({
        title: that.fx.title,
        link: url,
        imgUrl: this.icon ? this.icon : that.logoUrl // 自定义图标
      });
      //Toast('点击右上角发送给微信好友或分享到朋友圈');
      this.$store.commit("setshare", true);
      this.showBJ = false;
    },
    picopen() {
      var that = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localId = res.localIds[0].toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function(res) {
              var serverId = res.serverId; // 返回图片的服务器端ID
              api
                .downLoadWXPic({
                  mediaID: serverId
                })
                .then(res => {
                  console.log(res);
                  if (res.success) {
                    Dialog.alert({
                      title: "提示",
                      message: "上传成功！"
                    }).then(() => {
                      that.logoUrl =
                        "https://www.icottontrade.com/cot/Upload/mylogo/" +
                        res.data;
                    });
                  } else {
                    Toast.fail(res.data);
                  }
                });
              // console.log(serverId);
              // wx.downloadImage({
              //   serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
              //   isShowProgressTips: 1, // 默认为1，显示进度提示
              //   success: function(res) {
              //     var localId = res.localId; // 返回图片下载后的本地ID
              //     wx.getLocalImgData({
              //       localId: "", // 图片的localID
              //       success: function(res) {
              //         var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
              //         console.log(localData);
              //       }
              //     });
              //   }
              // });
            }
          });
        }
      });
    },
    fileopen: function() {
      if (iswx) {
        this.picopen();
        return;
      }
      var fileSelect = document.getElementById("file");
      fileSelect.click();
    },
    fileupdate: function() {
      var that = this;
      if (!this.$store.state.userInfo.ID) {
        Toast("请先登录");
        return false;
      }
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      if (inputDOM.files.length == 0) {
        Dialog.alert({
          title: "提示",
          message: "请选择Excel文件或图片上传！"
        }).then(() => {
          return false;
        });
      }
      this.file = inputDOM.files[0];
      var formdata = new FormData();
      formdata.append("file", inputDOM.files[0]);
      let data = {
        EntName: this.$store.state.userInfo.EntName,
        UserID: this.$store.state.userInfo.ID
      };
      formdata.append("data", JSON.stringify(data));
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      Toast.loading({
        mask: true,
        message: "正在上传..."
      });
      this.$http
        .post("/uploadUserLogo", formdata, config)
        .then(function(res) {
          Toast.clear();
          that.$store.commit("setUserLogo", res.data.data);
          that.logoUrl =
            "https://www.icottontrade.com/cot/Upload/mylogo/" + res.data.data;
          var user = that.$store.state.userInfo;
          user.logo = res.data.data;
          that.$store.commit("setUserInfo", user);
          if (res.data.success) {
            Dialog.alert({
              title: "提示",
              message: "上传成功！"
            }).then(() => {
              var fileSelect = document.getElementById("file");
              fileSelect.value = "";
            });
          } else {
            Toast.fail(res.data.data);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    onRead(file) {
      console.log(file);
      var that = this;
      let formData = new FormData();
      let data = {
        fileName: file.file.name,
        content: file.content,
        size: file.file.size,
        EntID: this.$store.state.userInfo.EntID,
        EntName: this.$store.state.userInfo.EntName,
        UserName: this.$store.state.userInfo.XM,
        UserID: this.$store.state.userInfo.ID
      };
      // formData.append('file', file.content);
      // formData.append('EntID', data.EntID);
      // formData.append('EntName', data.EntName);
      // formData.append('UserName', data.UserName);
      // formData.append('UserID', data.UserID);
      // formData.append('file', JSON.stringify(data));
      formData.append("file", file.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      console.log(file.file);
      that.$http.post("/addAttach", formData, config).then(function(res) {
        // that.fileNames.push(res.data.data);
        // that.fileList.push(that.webUrl + res.data.data);
      });
    }
  }
};
</script>

<style scoped lang='less'>
.popprice {
  width: 80%;
  padding: 1em;
  .inline {
    position: relative;
    top: 5px;
  }
  .btns {
    text-align: right;
    padding: 10px;
  }
  .ml1em {
    margin-left: 1em;
  }
  .btnPrice {
    margin-top: 1em;
  }
  .inline {
    text-align: left;
    .van-radio {
      display: inline-block;
    }
  }
  .logo {
    text-align: center;
    img {
      height: 100px;
      width: 100px;
      border: 1px solid #ccc;
    }
  }
  h4 {
    line-height: 2em;
  }
  .pub {
    width: 50%;
    display: block;
    margin: 1em auto;
    background: #2cb98e;
    border: 1px solid #2cb98e;
  }
}
.sharebtn {
  position: fixed;
  bottom: 155px;
  right: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: rgba(45, 186, 186, 0.6);
  border-radius: 50%;
  text-align: center;
  color: #fff;
  i {
    font-size: 18px;
  }
  h4 {
    font-size: 12px;
  }
}
.mask {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  .info {
    height: 6em;
    font-size: 14px;
    text-align: center;
    padding: 20px;
    border: 1px dotted;
  }
}
</style>